import { useIntersectionObserver } from '@vueuse/core';

import { App } from 'vue';

// 图片懒加载指令插件
export const imgLazyPlugin = {
    install(app: App) {
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el：指令作用的元素；binding：指令传递的相关信息
                // 采用VueUse提供的方法监控图片是否进入可视区域
                const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    if (isIntersecting) {
                        el.src = binding.value;
                        stop();
                    }
                }, { immediate: true });
            },
        });
    }
};